<!--个人信息-->
<template>
    <div class="container">
<!--        个人信息部分-->
        <el-card shadow="hover" style="width: 40%; text-align: center;">
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <el-avatar v-if="imageUrl" :src="imageUrl" fit="fill" :size="150"></el-avatar>
                <el-avatar v-else icon="el-icon-user-solid" :size="150"></el-avatar>
            </el-upload>
            <el-descriptions title="个人信息" direction="vertical" :column="2" border>
                <el-descriptions-item label="姓名">{{ userInfo.username }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ userInfo.sex ? '男' : '女' }}</el-descriptions-item>
                <el-descriptions-item label="账号">{{ userInfo.account }}</el-descriptions-item>
                <el-descriptions-item label="密码">{{ userInfo.password }}</el-descriptions-item>
                <el-descriptions-item label="手机">{{ userInfo.cell }}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{ userInfo.email }}</el-descriptions-item>
                <el-descriptions-item label="用户类型">{{ userInfo.userType === 'teacher' ? '老师' : userInfo.userType === 'student' ? '学生' : '超级管理员'}}</el-descriptions-item>
                <el-descriptions-item label="备注">
                    <el-tag size="small">{{ userInfo.admin ? '管理员' : '非管理员'}}</el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        
<!--        课程部分-->
        <el-card shadow="hover" style="width: 58%">
            <p style="text-align: center; font-weight: bolder; font-size: 20px; margin-top: 50px">
                <span v-if="userInfo.userType === 'student'">已选课程</span>
                <span v-else-if="userInfo.userType === 'teacher'">开设课程</span>
            </p>
            <el-table :data="list" height="650" style="width: 100%" highlight-current-row default-expand-all>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="课程名称">
                                <span>{{ props.row.courseName }}</span>
                            </el-form-item>
                            <el-form-item label="任课老师" v-if="userInfo.userType === 'student'">
                                <span>{{ props.row.teacherName }}</span>
                            </el-form-item>
                            <el-form-item label="已选课人数">
                                <span>{{ props.row.selectedNumber }}</span>
                            </el-form-item>
                            <el-form-item label="课程总人数">
                                <span>{{ props.row.totalNumber }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column prop="date">
                    <template slot-scope="scope">
                        {{scope.row.courseName}}
                    </template>
                </el-table-column>
                <el-table-column width="200" v-if="userInfo.userType === 'student'">
                    <template slot-scope="scope">
                        <el-button
                            slot="reference"
                            type="text"
                            size="mini"
                            icon="el-icon-delete"
                            @click.native="deselect(scope.row)"
                            style="margin-left: 10px;"
                        >退选</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        
    </div>
</template>

<script src="./personalInformation.js"></script>

<style lang="scss" scoped>
.container {
    display: flex;
    justify-content: space-between;
    height: 100%
}
.el-card {
    border-radius: 10px;
}
.el-descriptions {
    margin-top: 30px;
    ::v-deep.el-descriptions__header {
        justify-content: center;
        margin-bottom: 30px;
    }
}
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.el-form-item {
    margin-left: 50px;
    ::v-deep.el-form-item__label {
        width: 90px;
        color: #99a9bf;
    }
}
</style>
